<!doctype html>
<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
<div ng-controller='StudentListController'>
    <ul>
        <li ng-repeat='student in students'>
            <a ng-href='/student/view/{{student.id}}'>{{student.name}}</a>
        </li>
    </ul>
    <button ng-click="insertTom()">Insert Tom</button>
</div>
<script>
    var students = [
        {name: 'Mary Contrary', id: '1'},
        {name: 'Jack Sprat', id: '2'},
        {name: 'Jill Hill', id: '3'}
    ];

    function StudentListController($scope) {
        $scope.students = students;

        $scope.insertTom = function () {
            $scope.students.splice(1, 0, {name: 'Tom Thumb', id: '4'});
        };
    }
</script>
</body>
</html>
